<template>
  <div class="home-container">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="banner-content">
        <h1 class="welcome-title">
          欢迎回到你的创作空间
          <span v-if="currentUser" class="user-greeting">，{{ currentUser.username }}</span>
        </h1>
        <p class="welcome-subtitle">在这里记录灵感，分享故事</p>
        
        <!-- 温馨人文插画 -->
        <div class="welcome-illustration">
          <svg viewBox="0 0 400 240" xmlns="http://www.w3.org/2000/svg" class="main-illustration">
            <!-- 工作桌面场景 -->
            <g class="workspace">
              <!-- 桌面 -->
              <rect x="50" y="180" width="300" height="40" rx="8" fill="#F5DEB3" stroke="#D4A574" stroke-width="1"/>
              
              <!-- 人物（坐着创作） -->
              <g class="creator">
                <!-- 头部 -->
                <circle cx="120" cy="140" r="16" fill="#FAF8F5" stroke="#8B7355" stroke-width="1.5"/>
                <!-- 头发 -->
                <path d="M110 130 Q120 125 130 130 Q135 135 130 140 Q120 145 110 140 Z" fill="#8B7355"/>
                <!-- 身体 -->
                <rect x="110" y="155" width="20" height="25" rx="10" fill="#A3C4BC"/>
                <!-- 手臂 -->
                <line x1="105" y1="165" x2="90" y2="170" stroke="#8B7355" stroke-width="2" stroke-linecap="round"/>
                <line x1="135" y1="165" x2="150" y2="170" stroke="#8B7355" stroke-width="2" stroke-linecap="round"/>
              </g>
              
              <!-- 笔记本 -->
              <g class="notebook">
                <rect x="140" y="165" width="30" height="20" rx="2" fill="#F5DEB3" stroke="#8B7355" stroke-width="1"/>
                <!-- 笔记本线条 -->
                <line x1="145" y1="170" x2="165" y2="170" stroke="#8B7355" stroke-width="0.5"/>
                <line x1="145" y1="175" x2="160" y2="175" stroke="#8B7355" stroke-width="0.5"/>
                <line x1="145" y1="180" x2="158" y2="180" stroke="#8B7355" stroke-width="0.5"/>
                <!-- 螺旋装订 -->
                <circle cx="143" cy="170" r="1" fill="none" stroke="#8B7355" stroke-width="0.5"/>
                <circle cx="143" cy="175" r="1" fill="none" stroke="#8B7355" stroke-width="0.5"/>
                <circle cx="143" cy="180" r="1" fill="none" stroke="#8B7355" stroke-width="0.5"/>
              </g>
              
              <!-- 咖啡杯 -->
              <g class="coffee">
                <ellipse cx="280" cy="175" rx="12" ry="8" fill="#FAF8F5" stroke="#8B7355" stroke-width="1.5"/>
                <ellipse cx="280" cy="170" rx="10" ry="6" fill="#D2691E"/>
                <!-- 杯把手 -->
                <path d="M292 172 Q300 172 300 178 Q300 184 292 184" fill="none" stroke="#8B7355" stroke-width="1.5"/>
                <!-- 热气 -->
                <path d="M275 160 Q275 155 280 158 Q285 155 285 160" fill="none" stroke="#A3C4BC" stroke-width="1" opacity="0.7"/>
                <path d="M280 158 Q280 153 285 156 Q290 153 290 158" fill="none" stroke="#A3C4BC" stroke-width="1" opacity="0.5"/>
              </g>
              
              <!-- 植物盆栽 -->
              <g class="plant">
                <rect x="320" y="160" width="16" height="20" rx="2" fill="#D4A574"/>
                <ellipse cx="328" cy="150" rx="8" ry="12" fill="#8FBC8F"/>
                <ellipse cx="335" cy="145" rx="6" ry="10" fill="#9ACD32"/>
                <ellipse cx="320" cy="148" rx="5" ry="8" fill="#98FB98"/>
              </g>
              
              <!-- 彩色铅笔 -->
              <g class="pencils">
                <rect x="200" y="168" width="3" height="15" fill="#FF6B6B" rx="1"/>
                <rect x="205" y="170" width="3" height="13" fill="#4ECDC4" rx="1"/>
                <rect x="210" y="169" width="3" height="14" fill="#45B7D1" rx="1"/>
                <rect x="215" y="171" width="3" height="12" fill="#F7DC6F" rx="1"/>
                <!-- 笔尖 -->
                <polygon points="201.5,183 200,185 203,185" fill="#2C3E50"/>
                <polygon points="206.5,183 205,185 208,185" fill="#2C3E50"/>
                <polygon points="211.5,183 210,185 213,185" fill="#2C3E50"/>
                <polygon points="216.5,183 215,185 218,185" fill="#2C3E50"/>
              </g>
              
              <!-- 书籍 -->
              <g class="books">
                <rect x="70" y="165" width="20" height="15" rx="1" fill="#E8B4B8" stroke="#8B7355" stroke-width="0.5"/>
                <rect x="72" y="160" width="18" height="15" rx="1" fill="#B4D8E7" stroke="#8B7355" stroke-width="0.5"/>
              </g>
            </g>
            
            <!-- 装饰性元素 -->
            <g class="decorations" opacity="0.6">
              <!-- 飘浮的叶子 -->
              <ellipse cx="350" cy="80" rx="4" ry="8" fill="#8FBC8F" transform="rotate(25 350 80)"/>
              <ellipse cx="60" cy="100" rx="3" ry="6" fill="#9ACD32" transform="rotate(-15 60 100)"/>
              <!-- 纸屑 -->
              <rect x="300" y="60" width="6" height="6" rx="1" fill="#F5DEB3" transform="rotate(45 303 63)"/>
              <circle cx="80" cy="70" r="3" fill="#A3C4BC"/>
            </g>
          </svg>
        </div>
        
        <div class="quick-actions">
          <button @click="navigateTo('/text')" class="action-btn primary">
            <span class="icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 手写笔记本图标 -->
                <path d="M4 6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8 8L16 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
                <path d="M8 12L14 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
                <path d="M8 16L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
                <!-- 手绘装饰小圆点 -->
                <circle cx="16.5" cy="16" r="0.8" fill="currentColor" opacity="0.5"/>
              </svg>
            </span>
            开始写作
          </button>
          <button @click="navigateTo('/image')" class="action-btn">
            <span class="icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 画笔调色板图标 -->
                <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor" opacity="0.2"/>
                <path d="M6 8C6 6.89543 6.89543 6 8 6H16C17.1046 6 18 6.89543 18 8V16C18 17.1046 17.1046 18 16 18H8C6.89543 18 6 17.1046 6 16V8Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 15C10.5 13.5 11.5 12.5 13 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
                <circle cx="10.5" cy="10.5" r="1" fill="currentColor" opacity="0.6"/>
                <!-- 画笔装饰 -->
                <path d="M16 6L18 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.7"/>
              </svg>
            </span>
            画点什么
          </button>
          <button @click="navigateTo('/chat')" class="action-btn">
            <span class="icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- 对话气泡图标 -->
                <path d="M8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C11.4 16 10.8 15.9 10.3 15.7L7 17L8.3 14.7C8.1 14.2 8 13.6 8 13C8 12.7 8 12.3 8.1 12Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                <!-- 手绘心形装饰 -->
                <path d="M13 11C13 10.5 13.2 10.2 13.5 10.2C13.8 10.2 14 10.5 14 11C14 11.3 13.8 11.5 13.7 11.6L13.5 11.8L13.3 11.6C13.2 11.5 13 11.3 13 11Z" fill="currentColor" opacity="0.6"/>
                <circle cx="10.5" cy="11" r="0.5" fill="currentColor" opacity="0.5"/>
                <circle cx="15.5" cy="13" r="0.5" fill="currentColor" opacity="0.5"/>
              </svg>
            </span>
            聊聊想法
          </button>
        </div>
      </div>
    </div>

    <!-- 信息卡片 -->
    <div class="stats-section">
      <h2 class="section-title">创作记录</h2>
      
      <!-- 图表视图 -->
      <div class="charts-container">
        <div class="charts-grid">
          <!-- 创作类型分布饼图 -->
          <div class="chart-card pie-chart-card">
            <div class="chart-header">
              <h3 class="chart-title">创作类型分布</h3>
              <div class="chart-subtitle">按类型统计创作数量</div>
            </div>
            <div class="chart-wrapper">
              <canvas ref="pieChartRef" class="chart-canvas"></canvas>
            </div>
            <div class="chart-legend">
              <div class="legend-items">
                <div 
                  v-for="(item, index) in typeDistribution" 
                  :key="item.label"
                  class="legend-item"
                >
                  <span 
                    class="legend-color" 
                    :style="{ backgroundColor: chartColors[index] }"
                  ></span>
                  <span class="legend-label">{{ item.label }}</span>
                  <span class="legend-value">{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 创作趋势柱状图 -->
          <div class="chart-card bar-chart-card">
            <div class="chart-header">
              <h3 class="chart-title">创作趋势</h3>
              <div class="chart-subtitle">最近7天创作数量</div>
            </div>
            <div class="chart-wrapper">
              <canvas ref="barChartRef" class="chart-canvas"></canvas>
            </div>
          </div>

          <!-- 创作时间热力图 -->
          <div class="chart-card heatmap-card">
            <div class="chart-header">
              <h3 class="chart-title">创作时间分布</h3>
              <div class="chart-subtitle">一周内各时段创作活跃度</div>
            </div>
            <div class="heatmap-wrapper">
              <div class="heatmap-grid">
                <div class="time-labels">
                  <div v-for="hour in timeLabels" :key="hour" class="time-label">{{ hour }}</div>
                </div>
                <div class="day-rows">
                  <div v-for="(day, dayIndex) in dayLabels" :key="day" class="day-row">
                    <div class="day-label">{{ day }}</div>
                    <div class="hour-cells">
                      <div 
                        v-for="(hour, hourIndex) in timeLabels" 
                        :key="`${dayIndex}-${hourIndex}`"
                        class="heat-cell"
                        :class="getHeatIntensity(dayIndex, hourIndex)"
                        :title="`${day} ${hour}:00 - 创作 ${getHeatValue(dayIndex, hourIndex)} 次`"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 创作质量分析雷达图 -->
          <div class="chart-card radar-chart-card">
            <div class="chart-header">
              <h3 class="chart-title">创作质量分析</h3>
              <div class="chart-subtitle">各维度表现评估</div>
            </div>
            <div class="chart-wrapper">
              <canvas ref="radarChartRef" class="chart-canvas"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="features-section">
      <h2 class="section-title">创作工具箱</h2>
      <div class="features-grid">
        <div class="feature-card" @click="navigateTo('/text')">
          <div class="feature-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 手写笔记本 -->
              <path d="M4 4H20V20H4V4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
              <path d="M7 8H17" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
              <path d="M7 12H15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
              <path d="M7 16H13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
              <!-- 装饰元素 -->
              <circle cx="18" cy="6" r="1" fill="currentColor" opacity="0.4"/>
              <path d="M16 18C16.5 17.5 17 17 17.5 17.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
            </svg>
          </div>
          <h3 class="feature-title">文字记录</h3>
          <p class="feature-description">写下想法和故事，整理思绪</p>
          <div class="feature-status">
            <span class="status-badge ready">就绪</span>
          </div>
        </div>
        
        <div class="feature-card" @click="navigateTo('/image')">
          <div class="feature-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 艺术画板 -->
              <path d="M3 8C3 6.89543 3.89543 6 5 6H19C20.1046 6 21 6.89543 21 8V16C21 17.1046 20.1046 18 19 18H5C3.89543 18 3 17.1046 3 16V8Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              <!-- 山峯和太阳 -->
              <path d="M6 15L9 12L12 15L15 12L18 15" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
              <circle cx="15" cy="10" r="1.5" fill="currentColor" opacity="0.6"/>
              <!-- 画笔装饰 -->
              <path d="M19 5L21 3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
              <circle cx="20" cy="4" r="0.5" fill="currentColor" opacity="0.5"/>
            </svg>
          </div>
          <h3 class="feature-title">视觉创作</h3>
          <p class="feature-description">用色彩表达想象，绘制心中画面</p>
          <div class="feature-status">
            <span class="status-badge ready">就绪</span>
          </div>
        </div>
        
        <div class="feature-card" @click="navigateTo('/chat')">
          <div class="feature-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 对话气泡 -->
              <path d="M12 3C16.97 3 21 6.58 21 11C21 15.42 16.97 19 12 19C11.1 19 10.26 18.87 9.47 18.63L6 21L8.37 17.53C6.88 16.18 6 13.69 6 11C6 6.58 10.03 3 15 3H12Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              <!-- 对话气泡内容 -->
              <circle cx="10" cy="11" r="1" fill="currentColor" opacity="0.6"/>
              <circle cx="12" cy="11" r="1" fill="currentColor" opacity="0.6"/>
              <circle cx="14" cy="11" r="1" fill="currentColor" opacity="0.6"/>
              <!-- 手绘装饰 -->
              <path d="M16 8C16.5 7.5 17 8 17 8.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
            </svg>
          </div>
          <h3 class="feature-title">思维对话</h3>
          <p class="feature-description">整理思路，探讨创意可能性</p>
          <div class="feature-status">
            <span class="status-badge ready">就绪</span>
          </div>
        </div>
        
        <div class="feature-card" @click="navigateTo('/music')">
          <div class="feature-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 手绘音符 -->
              <path d="M9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18Z" fill="currentColor" opacity="0.3"/>
              <path d="M19 16C19 17.1046 18.1046 18 17 18C15.8954 18 15 17.1046 15 16C15 14.8954 15.8954 14 17 14C18.1046 14 19 14.8954 19 16Z" fill="currentColor" opacity="0.3"/>
              <path d="M9 18V6L19 4V16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              <!-- 手绘装饰音符 -->
              <path d="M12 8C12.5 7.5 13 8 13.5 7.5C14 8 14.5 7.5 15 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
              <circle cx="16" cy="6" r="0.5" fill="currentColor" opacity="0.5"/>
            </svg>
          </div>
          <h3 class="feature-title">音律创作</h3>
          <p class="feature-description">谱写旋律，记录心境节拍</p>
          <div class="feature-status">
            <span class="status-badge preparing">准备中</span>
          </div>
        </div>
        
        <div class="feature-card" @click="navigateTo('/video')">
          <div class="feature-icon">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 手绘相机 -->
              <path d="M3 7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              <!-- 镜头 -->
              <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
              <circle cx="12" cy="12" r="1.5" fill="currentColor" opacity="0.4"/>
              <!-- 手绘装饰 -->
              <circle cx="17" cy="8" r="0.8" fill="currentColor" opacity="0.5"/>
              <path d="M6 6L8 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.6"/>
              <path d="M16 16C16.5 15.5 17 16 17.5 15.5" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
            </svg>
          </div>
          <h3 class="feature-title">动态叙事</h3>
          <p class="feature-description">编辑画面，讲述动人故事</p>
          <div class="feature-status">
            <span class="status-badge preparing">准备中</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近动态 -->
    <div class="activity-section">
      <h2 class="section-title">最近的创作</h2>
      <div class="activity-content">
        <!-- 创作记录表格 -->
        <div class="creation-table" v-if="recentActivities.length > 0">
          <div class="table-header">
            <div class="search-box">
              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                <circle cx="11" cy="11" r="8"/>
                <path d="m21 21-4.35-4.35"/>
              </svg>
              <input 
                v-model="searchTerm" 
                type="text" 
                placeholder="搜索创作内容..."
                class="search-input"
              />
            </div>
            <div class="table-actions">
              <button class="action-btn primary" @click="addNewCreation">
                <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                  <line x1="12" y1="5" x2="12" y2="19"/>
                  <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                新建创作
              </button>
            </div>
          </div>
          
          <div class="table-container">
            <table class="creation-data-table">
              <thead>
                <tr>
                  <th @click="sortBy('title')" class="sortable">
                    标题
                    <svg v-if="sortField === 'title'" class="sort-icon" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
                      <path :d="sortOrder === 'asc' ? 'M7 14l5-5 5 5' : 'M7 10l5 5 5-5'"/>
                    </svg>
                  </th>
                  <th @click="sortBy('type')" class="sortable">
                    类型
                    <svg v-if="sortField === 'type'" class="sort-icon" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
                      <path :d="sortOrder === 'asc' ? 'M7 14l5-5 5 5' : 'M7 10l5 5 5-5'"/>
                    </svg>
                  </th>
                  <th @click="sortBy('time')" class="sortable">
                    时间
                    <svg v-if="sortField === 'time'" class="sort-icon" width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
                      <path :d="sortOrder === 'asc' ? 'M7 14l5-5 5 5' : 'M7 10l5 5 5-5'"/>
                    </svg>
                  </th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="activity in filteredAndSortedActivities" :key="activity.id" class="table-row" @click="viewCreation(activity)">
                  <td class="title-cell">
                    <div class="activity-title-wrapper">
                      <span class="activity-emoji">{{ activity.icon }}</span>
                      <span class="activity-title">{{ activity.title }}</span>
                    </div>
                    <p class="activity-description">{{ activity.description }}</p>
                  </td>
                  <td class="type-cell">
                    <span class="type-badge">{{ getTypeCategory(activity.title) }}</span>
                  </td>
                  <td class="time-cell">
                    <span class="activity-time">{{ formatTime(activity.time) }}</span>
                  </td>
                  <td class="actions-cell">
                    <div class="action-buttons">
                      <button class="icon-btn edit" @click.stop="editCreation(activity)" title="编辑">
                        <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                      </button>
                      <button class="icon-btn delete" @click.stop="deleteCreation(activity.id)" title="删除">
                        <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                          <polyline points="3,6 5,6 21,6"/>
                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                        </svg>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 分页 -->
          <div class="table-pagination" v-if="filteredAndSortedActivities.length > pageSize">
            <div class="pagination-info">
              显示 {{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, filteredAndSortedActivities.length) }} 条，共 {{ filteredAndSortedActivities.length }} 条
            </div>
            <div class="pagination-controls">
              <button class="page-btn" @click="previousPage" :disabled="currentPage === 1">
                <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                  <path d="M15 18l-6-6 6-6"/>
                </svg>
              </button>
              <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
              <button class="page-btn" @click="nextPage" :disabled="currentPage === totalPages">
                <svg width="16" height="16" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.8">
                  <path d="M9 18l6-6-6-6"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-else class="empty-activity">
          <div class="empty-illustration">
            <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect x="20" y="25" width="40" height="30" rx="4" fill="#F5DEB3" stroke="#8B7355" stroke-width="1"/>
              <line x1="25" y1="32" x2="50" y2="32" stroke="#8B7355" stroke-width="1" opacity="0.6"/>
              <line x1="25" y1="37" x2="45" y2="37" stroke="#8B7355" stroke-width="1" opacity="0.6"/>
              <line x1="25" y1="42" x2="48" y2="42" stroke="#8B7355" stroke-width="1" opacity="0.6"/>
              <circle cx="30" cy="15" r="8" fill="#A3C4BC" opacity="0.3"/>
              <circle cx="55" cy="20" r="6" fill="#8B7355" opacity="0.2"/>
            </svg>
          </div>
          <p class="empty-text">这里还很安静</p>
          <p class="empty-subtitle">不如开始记录第一个想法？</p>
          <button @click="navigateTo('/text')" class="start-creating-btn">
            开始创作
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Chart, registerables } from 'chart.js'

// 注册Chart.js组件
Chart.register(...registerables)

export default {
  name: 'Home',
  setup() {
    console.log('=== Home.vue 组件开始加载 ===')

    const router = useRouter()

// 响应式数据
const currentUser = ref(null)
const stats = ref({
  totalModels: 8,
  totalSessions: 1234,
  totalMessages: 5678,
  activeUsers: 892
})

// 图表相关数据
const pieChartRef = ref(null)
const barChartRef = ref(null)
const radarChartRef = ref(null)
let pieChart = null
let barChart = null
let radarChart = null

// 图表颜色主题 - 适配Human-Warm Minimal设计
const chartColors = [
  '#8B7355', // 大地棕
  '#A3C4BC', // 鼠尾草绿
  '#D4A574', // 暖黄
  '#B4D8E7', // 天蓝
  '#E8B4B8', // 粉红
  '#8FBC8F'  // 森林绿
]

// 创作类型分布数据
const typeDistribution = ref([
  { label: '文字', value: 45 },
  { label: '视觉', value: 28 },
  { label: '对话', value: 18 },
  { label: '音乐', value: 6 },
  { label: '其他', value: 3 }
])

// 创作趋势数据（最近7天）
const trendData = ref({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  data: [12, 19, 15, 25, 22, 18, 16]
})

// 热力图数据
const timeLabels = ref(['00', '06', '12', '18'])
const dayLabels = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
const heatmapData = ref([
  [2, 1, 4, 3], // 周一
  [1, 2, 5, 4], // 周二
  [3, 4, 6, 2], // 周三
  [2, 3, 8, 5], // 周四
  [4, 5, 7, 4], // 周五
  [6, 3, 4, 8], // 周六
  [5, 2, 3, 6]  // 周日
])

const recentActivities = ref([
  {
    id: 1,
    icon: '🗒️', // 笔记本
    title: '日记记录',
    description: '写了一些关于春天的所思所想',
    time: new Date(Date.now() - 30 * 60 * 1000) // 30分钟前
  },
  {
    id: 2,
    icon: '🌿', // 叶子
    title: '绘画创作',
    description: '画了一幅"午后阳光"主题的素描',
    time: new Date(Date.now() - 2 * 60 * 60 * 1000) // 2小时前
  },
  {
    id: 3,
    icon: '🌱', // 幼苗
    title: '思路整理',
    description: '和助手聊了关于生活感悟的想法',
    time: new Date(Date.now() - 24 * 60 * 60 * 1000) // 1天前
  },
  {
    id: 4,
    icon: '🎵',
    title: '音乐创作',
    description: '尝试谱写一首简单的旋律',
    time: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000) // 3天前
  },
  {
    id: 5,
    icon: '🌅',
    title: '摄影作品',
    description: '记录了一个美丽的日出时刻',
    time: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000) // 5天前
  },
  {
    id: 6,
    icon: '🌾', // 麦穗
    title: '阅读笔记',
    description: '整理了最近读书的一些心得',
    time: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) // 7天前
  }
])

// 表格相关状态
const searchTerm = ref('')
const sortField = ref('time')
const sortOrder = ref('desc')
const currentPage = ref(1)
const pageSize = ref(5)

// 热力图相关方法
const getHeatValue = (dayIndex, hourIndex) => {
  return heatmapData.value[dayIndex] ? heatmapData.value[dayIndex][hourIndex] || 0 : 0
}

const getHeatIntensity = (dayIndex, hourIndex) => {
  const value = getHeatValue(dayIndex, hourIndex)
  if (value === 0) return 'heat-0'
  if (value <= 2) return 'heat-1'
  if (value <= 4) return 'heat-2'
  if (value <= 6) return 'heat-3'
  return 'heat-4'
}

// 创建饼状图
const createPieChart = () => {
  if (!pieChartRef.value) return
  
  const ctx = pieChartRef.value.getContext('2d')
  
  if (pieChart) {
    pieChart.destroy()
  }
  
  pieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: typeDistribution.value.map(item => item.label),
      datasets: [{
        data: typeDistribution.value.map(item => item.value),
        backgroundColor: chartColors.slice(0, typeDistribution.value.length),
        borderColor: '#FAF8F5',
        borderWidth: 3,
        hoverBorderWidth: 4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(139, 115, 85, 0.9)',
          titleColor: '#FAF8F5',
          bodyColor: '#FAF8F5',
          borderColor: '#8B7355',
          borderWidth: 1,
          cornerRadius: 12,
          padding: 12,
          titleFont: {
            size: 14,
            weight: '600'
          },
          bodyFont: {
            size: 13
          },
          callbacks: {
            label: (context) => {
              const label = context.label || ''
              const value = context.parsed || 0
              const total = context.dataset.data.reduce((a, b) => a + b, 0)
              const percentage = ((value / total) * 100).toFixed(1)
              return `${label}: ${value} (${percentage}%)`
            }
          }
        }
      },
      cutout: '65%',
      animation: {
        animateRotate: true,
        duration: 1500,
        easing: 'easeOutCubic'
      }
    }
  })
}

// 创建柱状图
const createBarChart = () => {
  if (!barChartRef.value) return
  
  const ctx = barChartRef.value.getContext('2d')
  
  if (barChart) {
    barChart.destroy()
  }
  
  barChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: trendData.value.labels,
      datasets: [{
        label: '创作数量',
        data: trendData.value.data,
        backgroundColor: 'rgba(139, 115, 85, 0.2)',
        borderColor: '#8B7355',
        borderWidth: 2,
        borderRadius: 8,
        borderSkipped: false,
        hoverBackgroundColor: 'rgba(139, 115, 85, 0.3)',
        hoverBorderColor: '#6B5B4A',
        hoverBorderWidth: 3
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(139, 115, 85, 0.9)',
          titleColor: '#FAF8F5',
          bodyColor: '#FAF8F5',
          borderColor: '#8B7355',
          borderWidth: 1,
          cornerRadius: 12,
          padding: 12,
          titleFont: {
            size: 14,
            weight: '600'
          },
          bodyFont: {
            size: 13
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: 'rgba(139, 115, 85, 0.1)',
            lineWidth: 1
          },
          ticks: {
            color: '#8B7355',
            font: {
              size: 12,
              weight: '500'
            }
          }
        },
        x: {
          grid: {
            display: false
          },
          ticks: {
            color: '#8B7355',
            font: {
              size: 12,
              weight: '500'
            }
          }
        }
      },
      animation: {
        duration: 1500,
        easing: 'easeOutCubic'
      }
    }
  })
}

// 创建雷达图
const createRadarChart = () => {
  if (!radarChartRef.value) return
  
  const ctx = radarChartRef.value.getContext('2d')
  
  if (radarChart) {
    radarChart.destroy()
  }
  
  radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['创意性', '技术性', '完整性', '美观度', '实用性'],
      datasets: [{
        label: '当前水平',
        data: [85, 72, 90, 78, 82],
        backgroundColor: 'rgba(163, 196, 188, 0.2)',
        borderColor: '#A3C4BC',
        borderWidth: 2,
        pointBackgroundColor: '#8B7355',
        pointBorderColor: '#FAF8F5',
        pointBorderWidth: 2,
        pointRadius: 5,
        pointHoverRadius: 7
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(139, 115, 85, 0.9)',
          titleColor: '#FAF8F5',
          bodyColor: '#FAF8F5',
          borderColor: '#8B7355',
          borderWidth: 1,
          cornerRadius: 12,
          padding: 12
        }
      },
      scales: {
        r: {
          beginAtZero: true,
          max: 100,
          grid: {
            color: 'rgba(139, 115, 85, 0.1)'
          },
          angleLines: {
            color: 'rgba(139, 115, 85, 0.1)'
          },
          pointLabels: {
            color: '#8B7355',
            font: {
              size: 12,
              weight: '500'
            }
          },
          ticks: {
            display: false
          }
        }
      },
      animation: {
        duration: 1500,
        easing: 'easeOutCubic'
      }
    }
  })
}

// 初始化所有图表
const initCharts = async () => {
  await nextTick()
  createPieChart()
  createBarChart()
  createRadarChart()
}

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return '刚刚'
  }
}

// 表格相关方法
const getTypeCategory = (title) => {
  if (title.includes('日记') || title.includes('笔记') || title.includes('文字')) return '文字'
  if (title.includes('绘画') || title.includes('摄影') || title.includes('作品')) return '视觉'
  if (title.includes('音乐') || title.includes('旋律')) return '音音'
  if (title.includes('思路') || title.includes('聊天')) return '对话'
  return '其他'
}

const sortBy = (field) => {
  if (sortField.value === field) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortField.value = field
    sortOrder.value = 'asc'
  }
  currentPage.value = 1
}

const viewCreation = (activity) => {
  console.log('查看创作:', activity)
  // 这里可以跳转到详情页或打开模态框
}

const editCreation = (activity) => {
  console.log('编辑创作:', activity)
  // 这里可以打开编辑对话框
}

const deleteCreation = (id) => {
  if (confirm('确定要删除这条创作记录吗？')) {
    const index = recentActivities.value.findIndex(item => item.id === id)
    if (index > -1) {
      recentActivities.value.splice(index, 1)
    }
  }
}

const addNewCreation = () => {
  console.log('新建创作')
  // 这里可以打开新建对话框或跳转到创作页面
  navigateTo('/text')
}

const navigateTo = (path) => {
  router.push(path)
}

const previousPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 计算属性
const filteredAndSortedActivities = computed(() => {
  let filtered = recentActivities.value
  
  // 搜索过滤
  if (searchTerm.value) {
    const term = searchTerm.value.toLowerCase()
    filtered = filtered.filter(activity => 
      activity.title.toLowerCase().includes(term) ||
      activity.description.toLowerCase().includes(term) ||
      getTypeCategory(activity.title).toLowerCase().includes(term)
    )
  }
  
  // 排序
  filtered.sort((a, b) => {
    let aValue, bValue
    
    switch (sortField.value) {
      case 'title':
        aValue = a.title
        bValue = b.title
        break
      case 'type':
        aValue = getTypeCategory(a.title)
        bValue = getTypeCategory(b.title)
        break
      case 'time':
      default:
        aValue = a.time
        bValue = b.time
        break
    }
    
    if (sortField.value === 'time') {
      // 时间排序
      return sortOrder.value === 'asc' ? aValue - bValue : bValue - aValue
    } else {
      // 字符串排序
      const result = aValue.localeCompare(bValue)
      return sortOrder.value === 'asc' ? result : -result
    }
  })
  
  return filtered
})

const totalPages = computed(() => {
  return Math.ceil(filteredAndSortedActivities.value.length / pageSize.value)
})

// 生命周期
onMounted(() => {
  console.log('=== Home.vue onMounted 开始 ===')
  console.log('当前路由:', router.currentRoute.value)
  console.log('当前 URL:', window.location.href)
  
  // 加载用户信息
  const savedUser = localStorage.getItem('user')
  console.log('本地存储的用户信息:', savedUser)
  
  if (savedUser) {
    try {
      currentUser.value = JSON.parse(savedUser)
      console.log('用户信息解析成功:', currentUser.value)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
  
  // 初始化图表
  nextTick(() => {
    setTimeout(() => {
      initCharts()
    }, 300) // 稍微延迟以确保 DOM 完全渲染
  })
  
  // 这里可以加载真实的统计数据
  console.log('首页已加载')
  console.log('=== Home.vue onMounted 结束 ===')
})

  return {
    currentUser,
    stats,
    recentActivities,
    navigateTo,
    formatTime,
    // 图表相关
    pieChartRef,
    barChartRef,
    radarChartRef,
    typeDistribution,
    chartColors,
    timeLabels,
    dayLabels,
    getHeatValue,
    getHeatIntensity,
    initCharts,
    // 表格相关
    searchTerm,
    sortField,
    sortOrder,
    currentPage,
    pageSize,
    filteredAndSortedActivities,
    totalPages,
    getTypeCategory,
    sortBy,
    viewCreation,
    editCreation,
    deleteCreation,
    addNewCreation,
    previousPage,
    nextPage
  }
}
}
</script>

<style scoped>
/* CSS 变量定义 - 自然色彩系统 */
:root {
  --fz-body: 17px;
  --lh-body: 1.55;
  --fz-h3: calc(var(--fz-body) * 1.333);
  --fz-h2: calc(var(--fz-body) * 1.6);
  --fz-meta: 14px;
  
  /* 自然色彩角色 */
  --color-primary: #8B7355;      /* 大地棕 */
  --color-secondary: #A3C4BC;    /* 鼠尾草绿 */
  --color-surface: #FAF8F5;      /* 温暖米色 */
  --color-surface-variant: #F3F1ED;
  --color-outline: rgba(139, 115, 85, 0.12);
  --color-text: #333;
  --color-text-secondary: #666;
  --color-text-muted: #999;
}

.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: transparent;
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* 温暖纸张纹理背景 - 避免霓虹渐变 */
.home-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    /* 纸张细纹理 - 自然质感 */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='rgba(139,115,85,0.04)' stroke-width='1'><path d='M0 20H40M20 0V40'/><circle cx='10' cy='10' r='0.5' fill='rgba(139,115,85,0.02)'/><circle cx='30' cy='30' r='0.8' fill='rgba(163,196,188,0.02)'/></g></svg>"),
    /* 哑光色带 - 温暖过渡 */
    radial-gradient(ellipse 1000px 400px at 25% 20%, rgba(199, 184, 164, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 800px 300px at 75% 80%, rgba(183, 207, 200, 0.06) 0%, transparent 50%);
  background-size: 40px 40px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  pointer-events: none;
  z-index: -1;
}

/* 欢迎横幅 */
/* 欢迎横幅 - 哑光色带 + 纸纹理 */
.welcome-banner {
  /* 去掉大面积玻璃/强发光渐变，改为低饱和哑光色带 */
  background: linear-gradient(135deg, #C9B8A4 0%, #B7CFC8 100%);
  border-radius: 20px;
  padding: 48px 32px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); /* 轻投影 */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 纸纹理叠加，营造哑光手感 */
.welcome-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='rgba(80,60,40,0.06)' stroke-width='1'><path d='M0 20H40M20 0V40'/></g></svg>");
  background-size: 40px 40px;
  pointer-events: none;
}

.welcome-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.03"><circle cx="20" cy="20" r="1"/><circle cx="10" cy="10" r="0.5"/><circle cx="30" cy="30" r="0.8"/></g></g></svg>') repeat;
  animation: gentle-drift 30s linear infinite;
  pointer-events: none;
}

@keyframes gentle-drift {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-40px) translateY(-40px); }
}

/* 文本对比度达 AA 标准 */
.welcome-title {
  font-size: var(--fz-h2);
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.3;
  color: #fff; /* 确保对比度 */
  text-shadow: none;
  letter-spacing: 0.2px;
}

.user-greeting {
  color: rgba(255, 255, 255, 0.95);
  font-size: calc(var(--fz-h2) * 0.9);
  font-weight: 500;
}

.welcome-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92); /* 提高不透明度 */
  margin-bottom: 32px;
  font-weight: 400;
}

.quick-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 按钮 ≥44×44px 点击区 + 清晰焦点环 */
.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  min-height: 44px; /* ≥44px 点击区 */
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.16s ease; /* 160ms 自然缓动 */
  font-weight: 500;
  backdrop-filter: blur(8px);
  position: relative;
  outline: none;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px); /* 轻微位移 */
  border-color: rgba(255, 255, 255, 0.4);
}

/* 清晰焦点环 - AA 可达性 */
.action-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 0 0 1.5px rgba(139, 115, 85, 0.8) inset;
  transition: box-shadow 120ms ease;
}

.action-btn.primary {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.action-btn.primary:hover {
  background: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.action-btn.primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.25), 0 0 0 1.5px var(--color-primary) inset;
}

.action-btn .icon {
  font-size: 18px;
  /* 图标人文化风格 */
  filter: sepia(20%) saturate(70%) hue-rotate(15deg) brightness(1.1);
  transition: all 0.3s ease;
}

.action-btn .icon svg {
  /* SVG图标手绘风格 */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(139, 115, 85, 0.1));
}

.action-btn:hover .icon {
  transform: scale(1.05);
  filter: sepia(30%) saturate(80%) hue-rotate(10deg) brightness(1.15);
}

.welcome-illustration {
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.main-illustration {
  width: 300px;
  height: 200px;
  opacity: 0.9;
}

.creator {
  animation: gentle-breathe 4s ease-in-out infinite;
}

.workspace .plant {
  animation: leaf-sway 6s ease-in-out infinite;
}

.coffee path:last-child {
  animation: steam-rise 3s ease-in-out infinite;
}

.pencils {
  animation: subtle-shift 5s ease-in-out infinite;
}

@keyframes gentle-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes leaf-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(0.5px) rotate(0.5deg); }
  75% { transform: translateX(-0.5px) rotate(-0.5deg); }
}

@keyframes steam-rise {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.9; }
}

@keyframes subtle-shift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5px); }
}

/* 信息部分 - 去玻璃/强阴影 */
.stats-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: var(--fz-h2);
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--color-primary);
  position: relative;
  padding-left: 20px;
  letter-spacing: 0.2px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 28px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(139, 115, 85, 0.15);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* 统计卡片 - 近白表面 + 软内高光 + 极轻投影 */
.stat-card {
  background: #fff; /* 近白实色 */
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid var(--color-outline); /* 极轻边框 */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* 比当前更轻、更自然 */
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 160ms ease, box-shadow 160ms ease; /* 信息性动效 */
  position: relative;
  overflow: hidden;
  backdrop-filter: none; /* 去玻璃 */
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), #8FBC8F);
}

/* hover：信息性，不夸张 */
.stat-card:hover {
  transform: translateY(-3px); /* 轻微位移 */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

.stat-icon {
  font-size: 24px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-variant); /* 实色哑光块 */
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* 很轻的内高光 */
  border: 1px solid var(--color-outline);
  flex-shrink: 0;
}

.stat-number {
  font-size: calc(var(--fz-body) * 1.75);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1;
}

.stat-label {
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 500;
}

/* 图表容器样式 */
.charts-container {
  background: linear-gradient(135deg, #FDFCFA 0%, #F9F7F4 100%);
  border-radius: 24px;
  border: 1px solid rgba(139, 115, 85, 0.08);
  box-shadow: 
    0 12px 40px rgba(139, 115, 85, 0.08),
    0 4px 16px rgba(139, 115, 85, 0.04);
  overflow: hidden;
  position: relative;
}

.charts-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='rgba(139,115,85,0.015)' stroke-width='1'><path d='M0 40H80M40 0V80'/><circle cx='20' cy='20' r='1.5' fill='rgba(139,115,85,0.01)'/><circle cx='60' cy='60' r='2' fill='rgba(163,196,188,0.01)'/></g></svg>");
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.4;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  padding: 32px;
  position: relative;
  z-index: 1;
}

.chart-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(139, 115, 85, 0.08);
  box-shadow: 0 8px 24px rgba(139, 115, 85, 0.06);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), #8FBC8F);
  opacity: 0.6;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139, 115, 85, 0.1);
}

.chart-header {
  margin-bottom: 20px;
  text-align: center;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.chart-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.chart-wrapper {
  position: relative;
  height: 280px;
  margin-bottom: 20px;
}

.chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* 饼图图例 */
.chart-legend {
  margin-top: 16px;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(139, 115, 85, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(139, 115, 85, 0.1);
  font-size: 13px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-label {
  color: var(--color-text);
  font-weight: 500;
}

.legend-value {
  color: var(--color-primary);
  font-weight: 600;
}

/* 热力图样式 */
.heatmap-wrapper {
  padding: 16px;
  background: rgba(250, 248, 245, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(139, 115, 85, 0.08);
}

.heatmap-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.time-labels {
  display: flex;
  gap: 8px;
  margin-left: 60px;
  justify-content: space-between;
}

.time-label {
  width: 40px;
  text-align: center;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.day-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-label {
  width: 50px;
  text-align: right;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 12px;
}

.hour-cells {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex: 1;
}

.heat-cell {
  width: 40px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(139, 115, 85, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.heat-cell:hover {
  transform: scale(1.1);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.heat-0 {
  background: #F5F5F5;
}

.heat-1 {
  background: rgba(139, 115, 85, 0.2);
}

.heat-2 {
  background: rgba(139, 115, 85, 0.4);
}

.heat-3 {
  background: rgba(139, 115, 85, 0.6);
}

.heat-4 {
  background: rgba(139, 115, 85, 0.8);
}

/* 特殊卡片尺寸 */
.heatmap-card {
  grid-column: span 2;
}

.radar-chart-card .chart-wrapper {
  height: 320px;
}

/* 功能模块 - 线性图标统一风格 */
.features-section {
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature-card {
  background: #fff; /* 近白表面 */
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--color-outline);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); /* 极轻投影 */
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  position: relative;
  overflow: hidden;
  min-height: 44px;
  outline: none;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease; /* 缩短扫光时间 */
}

.feature-card:hover::before {
  transform: translateX(100%);
}

.feature-card:hover {
  transform: translateY(-3px) scale(1.01); /* 轻微位移 + 放大 */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.09);
}

/* 焦点环 - AA 可达性 */
.feature-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.25), 0 0 0 1.5px var(--color-primary) inset;
  outline: none;
}

/* 线性图标 - 统一 currentColor */
.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-primary);
  /* 人文风格滤镜 */
  filter: sepia(15%) saturate(60%) hue-rotate(10deg) brightness(1.05);
  transition: all 0.3s ease;
}

.feature-icon svg {
  width: 28px;
  height: 28px;
  /* 手绘风格线条 */
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(139, 115, 85, 0.15));
}

.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(2deg);
  filter: sepia(25%) saturate(70%) hue-rotate(8deg) brightness(1.1);
}

.feature-title {
  font-size: var(--fz-h3);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.feature-description {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: var(--fz-body);
}

.feature-status {
  position: absolute;
  top: 20px;
  right: 20px;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.ready {
  background: rgba(143, 188, 143, 0.12);
  color: #556B2F;
  border: 1px solid rgba(143, 188, 143, 0.25);
}

.status-badge.preparing {
  background: rgba(244, 164, 96, 0.12);
  color: #D2691E;
  border: 1px solid rgba(244, 164, 96, 0.25);
}

/* 最近活动 - Human-Warm Minimal表格设计 */
.activity-section {
  margin-bottom: 40px;
}

.activity-content {
  background: linear-gradient(135deg, #FDFCFA 0%, #F9F7F4 100%);
  border-radius: 24px;
  border: 1px solid rgba(139, 115, 85, 0.08);
  box-shadow: 
    0 12px 40px rgba(139, 115, 85, 0.08),
    0 4px 16px rgba(139, 115, 85, 0.04);
  overflow: hidden;
  position: relative;
}

/* 温暖纸张纹理背景 */
.activity-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='rgba(139,115,85,0.015)' stroke-width='1'><path d='M0 40H80M40 0V80'/><circle cx='20' cy='20' r='1.5' fill='rgba(139,115,85,0.01)'/><circle cx='60' cy='60' r='2' fill='rgba(163,196,188,0.01)'/><rect x='10' y='35' width='8' height='1' fill='rgba(139,115,85,0.008)'/><rect x='45' y='15' width='12' height='1' fill='rgba(163,196,188,0.008)'/></g></svg>");
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.4;
}

/* 表格头部 - 手工质感设计 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 32px;
  background: linear-gradient(135deg, #F7F4F0 0%, #F2EDE8 100%);
  border-bottom: 2px solid rgba(139, 115, 85, 0.08);
  gap: 20px;
  position: relative;
  z-index: 1;
}

/* 哑光色带装饰 */
.table-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 32px;
  right: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-secondary) 25%, var(--color-primary) 50%, var(--color-secondary) 75%, transparent 100%);
  opacity: 0.3;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 320px;
}

.search-icon {
  position: absolute;
  left: 16px;
  color: rgba(139, 115, 85, 0.5);
  pointer-events: none;
  z-index: 1;
}

.search-input {
  padding: 14px 16px 14px 48px;
  border: 2px solid rgba(139, 115, 85, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  font-size: 15px;
  width: 100%;
  transition: all 0.24s ease;
  outline: none;
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 16px rgba(139, 115, 85, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 
    0 0 0 4px rgba(139, 115, 85, 0.12),
    0 8px 24px rgba(139, 115, 85, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.95);
}

.search-input::placeholder {
  color: rgba(139, 115, 85, 0.4);
  font-style: italic;
}

.table-actions {
  display: flex;
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  font-size: 14px;
  min-height: 48px;
  outline: none;
  letter-spacing: 0.3px;
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, #A3826B 100%);
  color: white;
  box-shadow: 
    0 6px 20px rgba(139, 115, 85, 0.25),
    0 2px 8px rgba(139, 115, 85, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.action-btn.primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.action-btn.primary:hover::before {
  left: 100%;
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #A3826B 0%, var(--color-primary) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 28px rgba(139, 115, 85, 0.3),
    0 4px 12px rgba(139, 115, 85, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* 表格容器 - 优雅的滚动体验 */
.table-container {
  overflow-x: auto;
  position: relative;
  z-index: 1;
}

.creation-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: transparent;
}

.creation-data-table th {
  padding: 20px 24px;
  text-align: left;
  font-weight: 700;
  color: var(--color-primary);
  background: linear-gradient(135deg, #F8F5F1 0%, #F3EFEA 100%);
  border-bottom: 2px solid rgba(139, 115, 85, 0.1);
  position: relative;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.creation-data-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.creation-data-table th.sortable:hover {
  background: linear-gradient(135deg, #F4F0EB 0%, #EFEAE4 100%);
  color: #6B5B4A;
  transform: translateY(-1px);
}

.sort-icon {
  display: inline-block;
  margin-left: 6px;
  color: var(--color-primary);
  vertical-align: middle;
  transition: all 0.2s ease;
}

.creation-data-table td {
  padding: 24px;
  border-bottom: 1px solid rgba(139, 115, 85, 0.04);
  vertical-align: top;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.table-row {
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.table-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: all 0.2s ease;
}

.table-row:hover {
  background: linear-gradient(135deg, rgba(163, 196, 188, 0.08) 0%, rgba(139, 115, 85, 0.05) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139, 115, 85, 0.08);
}

.table-row:hover::before {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}

.table-row:hover .activity-title {
  color: var(--color-primary);
}

.title-cell {
  min-width: 220px;
  position: relative;
}

.activity-title-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.activity-emoji {
  font-size: 22px;
  flex-shrink: 0;
  padding: 8px;
  background: rgba(139, 115, 85, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(139, 115, 85, 0.12);
  transition: all 0.2s ease;
  /* 人文风格滤镜 - 温暖化处理 */
  filter: sepia(25%) saturate(75%) hue-rotate(15deg) brightness(1.08) contrast(0.95);
  position: relative;
}

.activity-emoji::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 248, 245, 0.2) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}

.table-row:hover .activity-emoji {
  background: rgba(139, 115, 85, 0.12);
  transform: scale(1.05) rotate(1deg);
  filter: sepia(35%) saturate(85%) hue-rotate(12deg) brightness(1.12) contrast(0.9);
}

.activity-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 16px;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
}

.activity-description {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  letter-spacing: 0.1px;
}

.type-cell {
  width: 120px;
}

.type-badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(163, 196, 188, 0.15) 0%, rgba(139, 115, 85, 0.1) 100%);
  color: var(--color-primary);
  border: 1.5px solid rgba(139, 115, 85, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.type-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.table-row:hover .type-badge::before {
  left: 100%;
}

.time-cell {
  width: 140px;
}

.activity-time {
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  background: rgba(139, 115, 85, 0.05);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(139, 115, 85, 0.08);
  display: inline-block;
}

.actions-cell {
  width: 120px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(139, 115, 85, 0.1);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.icon-btn:hover::before {
  opacity: 1;
}

.icon-btn.edit {
  color: var(--color-primary);
}

.icon-btn.edit:hover {
  background: rgba(139, 115, 85, 0.12);
  border-color: var(--color-primary);
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.icon-btn.delete {
  color: #D4654B;
}

.icon-btn.delete:hover {
  background: rgba(212, 101, 75, 0.12);
  border-color: #D4654B;
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 101, 75, 0.2);
}

/* 分页 - 精美的手工质感设计 */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: linear-gradient(135deg, #F9F6F2 0%, #F4F0EB 100%);
  border-top: 1px solid rgba(139, 115, 85, 0.08);
  position: relative;
  z-index: 1;
}

/* 底部装饰线 */
.table-pagination::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 25%, var(--color-secondary) 50%, var(--color-primary) 75%, transparent 100%);
  opacity: 0.2;
}

.pagination-info {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(139, 115, 85, 0.1);
  backdrop-filter: blur(8px);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-btn {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(139, 115, 85, 0.15);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 248, 245, 0.9) 100%);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.page-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(139, 115, 85, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.page-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.page-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary) 0%, #A3826B 100%);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 
    0 8px 24px rgba(139, 115, 85, 0.25),
    0 2px 8px rgba(139, 115, 85, 0.15);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(139, 115, 85, 0.05);
  border-color: rgba(139, 115, 85, 0.08);
  color: rgba(139, 115, 85, 0.3);
}

.page-info {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid rgba(139, 115, 85, 0.12);
  backdrop-filter: blur(8px);
  letter-spacing: 0.3px;
  min-width: 80px;
  text-align: center;
}

/* 空状态 - 插画 + 目的 + 一步行动 */
.empty-activity {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-primary);
}

.empty-illustration {
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  opacity: 0.7;
}

.empty-text {
  margin-bottom: 8px;
  font-size: var(--fz-h3);
  font-weight: 500;
  color: var(--color-primary);
}

.empty-subtitle {
  margin-bottom: 28px;
  font-size: var(--fz-body);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.start-creating-btn {
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--color-primary), #A3826B);
  color: white;
  border: none;
  border-radius: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms ease; /* 信息性动效 */
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
  min-height: 44px;
  outline: none;
}

.start-creating-btn:hover {
  background: linear-gradient(135deg, #A3826B, var(--color-primary));
  transform: translateY(-2px); /* 轻微位移 */
  box-shadow: 0 6px 16px rgba(139, 115, 85, 0.25);
}

.start-creating-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.25), 0 4px 12px rgba(139, 115, 85, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: 16px;
    font-size: 16px; /* 移动端可读字号 */
  }

  .stats-header {
    flex-direction: column;
    align-items: stretch;
  }

  .view-controls {
    justify-content: center;
  }

  .charts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .chart-card {
    padding: 20px;
  }

  .chart-wrapper {
    height: 240px;
  }

  .heatmap-card {
    grid-column: span 1;
  }

  .time-labels {
    margin-left: 40px;
  }

  .day-label {
    width: 35px;
    font-size: 11px;
  }

  .time-label {
    width: 30px;
    font-size: 11px;
  }

  .heat-cell {
    width: 30px;
    height: 20px;
  }

  .legend-items {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .welcome-banner {
    padding: 32px 20px;
    margin-bottom: 32px;
  }

  .welcome-title {
    font-size: calc(var(--fz-body) * 1.4);
  }

  .user-greeting {
    font-size: calc(var(--fz-body) * 1.2);
  }

  .welcome-subtitle {
    font-size: 16px;
  }

  .main-illustration {
    width: 320px;
    height: 200px;
  }

  .quick-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .action-btn {
    width: 200px;
    justify-content: center;
  }

  .stats-grid,
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stat-card {
    padding: 24px 20px;
  }

  .feature-card {
    padding: 24px 20px;
  }

  .activity-list {
    padding: 24px 20px;
  }

  .section-title {
    font-size: calc(var(--fz-body) * 1.3);
    margin-bottom: 20px;
  }

  .empty-activity {
    padding: 36px 16px;
  }
  
  /* 表格移动端适配 */
  .table-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-box {
    max-width: none;
  }
  
  .table-actions {
    justify-content: flex-end;
  }
  
  .creation-data-table {
    font-size: 13px;
  }
  
  .creation-data-table th,
  .creation-data-table td {
    padding: 12px 16px;
  }
  
  .activity-title {
    font-size: 14px;
  }
  
  .activity-description {
    font-size: 12px;
  }
  
  .table-pagination {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  .action-buttons {
    gap: 4px;
  }
  
  .icon-btn {
    width: 28px;
    height: 28px;
  }
}

/* 尊重用户动效偏好 - Calm Technology */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .feature-card::before,
  .welcome-banner::before {
    animation: none !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .stat-card,
  .feature-card,
  .activity-list {
    border: 2px solid var(--color-primary);
  }
  
  .section-title,
  .feature-title,
  .activity-title {
    font-weight: 700;
  }
}
</style>